<template>
  <div class="all-page">
    <!-- 返回按钮 -->
    <el-button type="primary" class="back-button" @click="back">返回上级页面</el-button>

    <!-- 报审表 -->
    <div class="page">
      <div class="document-header">
        <h1 class="document-title">材料、构配件进场检验记录</h1>
      </div>
      <table class="main-table">
        <!-- 项目信息行 -->
        <tr>
          <td rowspan="2" colspan="2" class="info-label">工程名称</td>
          <td rowspan="2" colspan="3" class="info-value">
            {{ subprojectName }}
          </td>
          <td class="info-label">编号</td>
          <td colspan="2"></td>
        </tr>
        <tr>
          <td class="info-label">检验日期</td>
          <td colspan="2" class="info-value">
            {{ reportData.witnessDate || '/' }}
          </td>
        </tr>

        <!-- 表头 -->
        <tr class="header-row">
          <td rowspan="2">序号</td>
          <td rowspan="2">名称</td>
          <td rowspan="2">规格型号</td>
          <td rowspan="2">进场数量(T)</td>
          <td>生产厂家</td>
          <td>外观检验项目</td>
          <td>试件编号</td>
          <td rowspan="2">备注</td>
        </tr>
        <tr class="header-row">
          <td>质量证明书编号</td>
          <td>检验结果</td>
          <td>复验结果</td>
        </tr>

        <!-- 数据行 -->
        <template v-for="(item, index) in reportData">
          <tr :key="'first-' + index">
            <td rowspan="2">{{ index + 1 }}</td>
            <td rowspan="2">{{ item.name }}</td>
            <td rowspan="2">
              {{ item.specification || '/' }}
            </td>
            <td rowspan="2">{{ item.getAmount || '/' }}</td>
            <td>{{ item.producer || '/' }}</td>
            <td>外观质量</td>
            <td>/</td>
            <td rowspan="2"></td>
          </tr>
          <tr :key="'second-' + index">
            <td>{{ item.heatBatchNumber || '/' }}</td>
            <td>合格</td>
            <td>/</td>
          </tr>
        </template>

        <!-- 检查意见行 -->
        <tr>
          <td colspan="8" class="opinion-cell">
            <div class="opinion-section">
              <span class="label">检查意见(施工单位)：</span>
              <div class="opinion-textarea"></div>
            </div>
            <div class="attachment-info">
              <span>附件：共 <span class="special-underline">/</span> 页</span>
            </div>
          </td>
        </tr>

        <!-- 验收意见行 -->
        <tr>
          <td colspan="8" class="acceptance-cell">
            <div class="acceptance-section">
              <span class="label">验收意见(监理/建设单位)：</span>
              <div class="opinion-textarea"></div>
            </div>
            <div class="acceptance-options">
              <label class="checkbox-label">
                <input type="checkbox" :checked="reportData.acceptanceStatus === 'agree'" disabled/>
                <span>同意</span>
              </label>
              <label class="checkbox-label">
                <input type="checkbox" :checked="reportData.acceptanceStatus === 'reinspect'" disabled/>
                <span>重新检验</span>
              </label>
              <label class="checkbox-label">
                <input type="checkbox" :checked="reportData.acceptanceStatus === 'withdraw'" disabled/>
                <span>退场</span>
              </label>
              <span class="acceptance-date">验收日期：___ 年 ___ 月 ___ 日</span>
            </div>
          </td>
        </tr>

        <!-- 签名栏 -->
        <tr>
          <td rowspan="3">签字栏</td>
          <td rowspan="2" colspan="2">施工单位(章)</td>
          <td rowspan="2" colspan="2"></td>
          <td>专业质检员</td>
          <td>专业工长</td>
          <td>检验员</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td colspan="2">监理或建设单位(章)</td>
          <td colspan="3"></td>
          <td>专业工程师</td>
          <td></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import router from '@/router'
import { getJCRecordPreview } from '@/api/statementManage/wuZi/wuZi'

export default {
  data() {
    return {
      loading: true, // 这是一个加载标识
      reportData: {}, // 这是报表数据接收变量
      localStorageId: '', // 用于存储id
      projectName: '',
      subprojectName: '',
      // 默认材料数据
      defaultMaterials: [
        {
          serialNumber: 1,
          name: '钢筋',
          specification: 'HRB400EC18',
          quantity: '15.120',
          manufacturer: '宁夏建龙特钢有限公司',
          certificateNumber: 'JLNX-2024-62591',
          inspectionItem: '外观质量',
          inspectionResult: '合格',
          testPieceNumber: '',
          reinspectionResult: '/',
          remarks: ''
        },
        {
          serialNumber: 2,
          name: '钢筋',
          specification: 'HRB400EC18',
          quantity: '7.560',
          manufacturer: '宁夏建龙特钢有限公司',
          certificateNumber: 'JLNX-2024-62591',
          inspectionItem: '外观质量',
          inspectionResult: '合格',
          testPieceNumber: '',
          reinspectionResult: '/',
          remarks: ''
        }
      ]
    }
  },
  async mounted() {
    const sessionData = sessionStorage.getItem('tempObj1')

    const parseData = JSON.parse(sessionData)
    this.projectName = parseData.projectName
    this.subprojectName = parseData.subprojectName
    const subprojectId = parseData.subprojectId

    const { result } = await getJCRecordPreview(subprojectId)
    this.reportData = result
  },
  beforeDestroy() {
    // 这个钩子函数用来退出的时候清除本地存储的数据 防止数据堆积在浏览器里
    if (this.localStorageId) {
      localStorage.removeItem(this.localStorageId)
    }
    document
      .querySelector('body')
      .setAttribute('style', 'background-color: white;') // 还原，因为这是个全局样式
  },
  beforeCreate() {
    document
      .querySelector('body')
      .setAttribute('style', 'background-color:#f5f5f5;') // 设置对比色
  },
  methods: {
    back() {
      router.push({ path: '/menus/statement' })
    }
  }
}
</script>

<style scoped>
.all-page {
  width: 100%;
  padding-bottom: 5%;
}

/* 返回按钮样式 */
.back-button {
  position: fixed;
  top: 1.5rem;
  left: 6.25rem;
  z-index: 1000;
  background-color: #409eff;
  border-color: #409eff;
  color: white;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.back-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.page {
  font-family: "Times New Roman", "宋体", sans-serif;
  padding: 4% 4% 0;
  width: 60%;
  aspect-ratio: 1 / 1.414;
  margin: 5% auto;
  background-color: white;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  line-height: 1.25rem;
}

.document-header {
  text-align: center;
  margin-bottom: 2%;
}

.document-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  padding: 2% 0;
}

.info-row {
  padding-left: 2%;
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  align-items: center;
}

.label {
  font-weight: bold;
  white-space: nowrap;
}

.value {
  margin-right: 3%;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.blank-box {
  display: inline-block;
  width: 3rem;
}

/* 部分文字的下划线 */
.special-underline {
  border-bottom: 0.0938rem solid #333;
  padding: 0 1rem 0.125rem;
  border-radius: 0.0625rem;
}

.kai-font {
  font-family: "Times New Roman", "楷体", "KaiTi", "STKaiti", sans-serif;
  font-size: 0.9375rem;
}

.indent-font {
  text-indent: 2rem;
}

.main-table {
  width: 100%;
  border-collapse: collapse;
  border: 0.18rem solid #000;
  table-layout: fixed;
}

.main-table td {
  border: 0.1rem solid #000;
  padding: 1.5%;
  text-align: center;
  vertical-align: middle;
}

.main-table td:nth-child(1) {
  width: 10%;
}

.main-table td:nth-child(2) {
  width: 45%;
}

.main-table td:nth-child(3) {
  width: 15%;
}

.main-table td:nth-child(4) {
  width: 30%;
}

/* 调整行高 */
.main-table tr {
  height: 3rem;
}

/* 项目信息行高度 */
.main-table tr:nth-child(1),
.main-table tr:nth-child(2) {
  height: 4rem;
}

/* 表头行高度 */
.header-row {
  height: 3.5rem;
}

/* 数据行高度 */
.main-table tr:not(.header-row):not(:nth-child(1)):not(:nth-child(2)):not( :nth-child(3)):not(:nth-child(4)) {
  height: 3.5rem;
}

/* 意见行高度 */
.opinion-cell,
.acceptance-cell {
  height: 6rem;
}

/* 签名栏行高度 */
.signature-header,
.signature-space {
  height: 3rem;
}

/* 信息单元格样式 */
.info-cell {
  text-align: left !important;
  padding: 2% !important;
}

.info-label {
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  width: 8%;
}

.info-value {
  text-align: left;
  padding: 1rem;
  vertical-align: middle;
}

/* 表头样式 */
.header-row {
  font-weight: bold;
}

.header-row td {
  font-weight: bold;
}

/* 意见单元格样式 */
.opinion-cell,
.acceptance-cell {
  text-align: left !important;
  padding: 2% !important;
}

.opinion-section,
.acceptance-section {
  margin-bottom: 1rem;
}

.opinion-textarea {
  min-height: 3rem;
  padding: 0.5rem;
  margin-top: 0.5rem;
  border-radius: 0.25rem;
}

.attachment-info {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: #666;
}

/* 验收选项样式 */
.acceptance-options {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.acceptance-date {
  margin-left: auto;
  font-size: 0.875rem;
}

@media print {
  @page {
    size: A4 portrait;
  }
}
</style>
